@charset "utf-8";

@import "reset";
@import "common";

@function r($px) {
  @return $px/50px * 1rem;
}

.web {
  section {
    background: white;
    .kv {
      .dt {
        width: r(640px);
        height: r(357px);
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
        }
        .mask {
          width: r(640px);
          height: r(104px);
          background-color: rgba(0, 0, 0, 0.3);
          position: absolute;
          bottom: 0;
          font-size: 0;
          p {
            width: r(560px);
            height: r(28px);
            font-size: r(26px);
            line-height: r(28px);
            color: white;
            margin: r(20px) r(32px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span {
            font-size: r(18px);
            color: white;
            margin: 0 r(24px);
            i {
              font-size: r(18px);
              color: white;
            }
          }
          #dataa {
            font-size: r(24px);
            text-align: right;
            margin-top: r(-8px);
          }
        }
      }
      .page {
        ul {
          font-size: r(16px);
          position: absolute;
          top: r(330px);
          left: 50%;
          transform: translateX(-50%);
          li {
            border: r(6px) solid #cdbeb2;
            border-radius: 50%;
            margin: 0 r(6px);
            &.active {
              border-color: #b60005;
            }
          }
        }
      }
    }
    .yinxiao {
      width: r(604px);
      background: white;
      padding-top: r(20px);
      margin: 0 auto;
      .hait {
        width: r(282px);
        height: r(320px);
        margin: r(8px) r(10px);
        background: #f6f6f6;
        .hait_logo {
          width: 100%;
          height: r(182px);
          img {
            width: 100%;
          }
        }
        p {
          font-size: r(22px);
          text-align: justify;
          font-weight: bold;
        }
        .yinx_butt {
          font-size: 0;
          margin: r(10px) 0;
          button {
            width: r(88px);
            height: r(28px);
            font-size: r(18px);
            background: #b20000;
            color: white;
            border: 0;
            border-radius: r(10px);
          }
          span {
            font-size: r(18px);
            color: #c5c5c5;
            margin: 0 r(20px);
            i {
              font-size: r(18px);
              color: #c5c5c5;
            }
          }
        }
        .yql {
          .czg_bottom {
            width: 100%;
            margin: 0 auto;
            font-size: 0;
            .tx {
              display: inline-block;
              width: r(28px);
              height: r(28px);
              overflow: hidden;
              vertical-align: middle;
              img {
                width: 100%;
                height: 100%;
              }
            }
            span {
              font-size: r(20px);
              color: #c5c5c5;
              margin: 0 r(9px);
              vertical-align: middle;
              i {
                font-size: r(20px);
                margin: 0 r(6px);
              }
            }
          }
        }
      }
    }

    .jzgd{
        width: r(604px);
        height: r(60px);
        line-height: r(60px);
        color: #c5c5c5;
        border-top: r(1px) solid #c5c5c5;
        margin: r(8px) auto;
        font-size: r(22px);
        text-align: center;
    }
  }
}
